<template>
  <div class="class-box">
    <van-nav-bar :title="title" left-text="分类" left-arrow @click-left="onClickLeft" />
    <!-- <div class="container"> -->
      <!-- <div class="app-list"> -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="container">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :immediate-check="false"
        :offset="100"
        class="container"
      >
        <van-row
          class="section-item"
          v-for="(item, index) in list"
          :key="index" @click.native="toAppDetail(item)"
        >
          <div class="section-item-left">
            <div class="section-img">
              <img :src="item.logo">
            </div>
          </div>
          <div class="section-item-middle">
            <p class="section-item-title">{{ item.name }}</p>
            <p class="section-item-desc">{{ item.short_desc }}</p>
          </div>
          <div class="section-item-right" style="text-slign: right;">
            <van-button
              class="section-btn" @click="download(item.ios_url,item.android_url)"
            >访问</van-button>
          </div>
        </van-row>
      </van-list>
    </van-pull-refresh>

    <div class="circle" v-if="isCircleLoading">
      <van-loading :size="'100px'" color="black" />
    </div>
      <!-- </div> -->
    <!-- </div> -->
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data () {
    return {
      isCircleLoading: true,
      title: '',
      loading: false,
      isLoading: false,
      finished: false,
      pageIndex: 0,
      pageCount: 10,
      active: 0,
      list: [],
      downloadControl:false
    }
  },
  mounted() {
    this.isCircleLoading = true
    // 获取头部信息
    this.title = this.$route.query.title
    // document.getElementsByClassName("van-tabbar")[0].style.display = "none";
    // document.getElementsByClassName("content")[0].style.overflow = "scroll";
    // document.getElementsByClassName("home-box")[0].style.padding = "0px";
    this.getListData()
  },
  methods: {
    onLoad() {
      this.pageIndex ++
      this.getListData()
    },
    onRefresh() {
      setTimeout(() => {
        this.isCircleLoading = true
        this.pageIndex = 0
        this.list = []
        this.getListData()
      }, 500);
    },
    onClickLeft(){
      this.$router.push('/class')
    },
    getListData() {
      let $this = this;
      if(sessionStorage.getItem("app_index") === "necessary"){
        let params = {is_necessary: 1}
        if(this.pageIndex != 0) {
          params.page = this.pageIndex + 1
        }
        this.$axios({
          method: "GET",
          url: url_g+"/app/",
          params: params
        }).then((res) => {
          if(res.data && res.data.results && 0 < res.data.results.length){
            // $this.list = res.data.results;

            let newArr = res.data.results
            this.pageCount = res.data.count

            for (let i = 0; i < newArr.length; i ++) {
              this.list.push(newArr[i])
            }

            this.loading = false;
            this.isLoading = false;
            this.isCircleLoading = false
            if (this.list.length >= this.pageCount) {
              this.finished = true;
            }
          }else{
            this.isCircleLoading = false
            Toast('没有数据');
          }
        }).catch((e)=>{
          Toast('您输入的信息有误或网络有问题，请检查重试！');
        })
      } else if(sessionStorage.getItem("app_index") === "is_eos"){
        let params = {is_eos: 1}
        if(this.pageIndex != 0) {
          params.page = this.pageIndex + 1
        }
        this.$axios({
          method: "GET",
          url: url_g+"/app/",
          params: params
        }).then((res) => {
          if(res.data && res.data.results && 0 < res.data.results.length){
            // $this.list = res.data.results;

            let newArr = res.data.results
            this.pageCount = res.data.count

            for (let i = 0; i < newArr.length; i ++) {
              this.list.push(newArr[i])
            }

            this.loading = false;
            this.isLoading = false;
            this.isCircleLoading = false
            if (this.list.length >= this.pageCount) {
              this.finished = true;
            }
          }else{
            this.isCircleLoading = false
            Toast('没有数据');
          }
        }).catch((e)=>{
          Toast('您输入的信息有误或网络有问题，请检查重试！');
        })
      }else {
        let params = {
          category: sessionStorage.getItem("app_index")
        }
        if(this.pageIndex != 0) {
          params.page = this.pageIndex + 1
        }
        $this.$axios({
          method: "GET",
          url: url_g+"/app/",
          params: params
        }).then((res) => {
          if(res.data && res.data.results && 0 < res.data.results.length){
            // $this.list = res.data.results;

            let newArr = res.data.results
            this.pageCount = res.data.count

            for (let i = 0; i < newArr.length; i ++) {
              this.list.push(newArr[i])
            }

            this.loading = false;
            this.isLoading = false;
            this.isCircleLoading = false
            if (this.list.length >= this.pageCount) {
              this.finished = true;
            }
          }else{
            this.isCircleLoading = false
            Toast('没有数据');
          }
        }).catch((e)=>{
          Toast('您输入的信息有误或网络有问题，请检查重试！');
        })
      }
    },
    download(iosUrl,androidUrl){
      if(this.andOrIos()) { //android
      	if(sessionStorage.getItem("usermessage")){
      		window.open(androidUrl)
      	}else{
      		this.$router.push("/login")
  			}
      }else{
      	if(sessionStorage.getItem("usermessage")){
        	window.open(iosUrl)
      	}else{
      		this.$router.push("/login")
  			}
      }
      this.downloadControl = true;
    },
    toAppDetail(item){
      if(!this.downloadControl){
        sessionStorage.setItem("appInfo",JSON.stringify(item));
        this.$router.push('/detail')
      }else{
        this.downloadControl = false;
      }

    },
    andOrIos() {
      let u = navigator.userAgent;
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      return isAndroid
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home-box .content{
  overflow-y:scroll
}
.app-list{
  width:95%;
  margin:0px auto;
  padding-top:10px;
  height:100%;
  overflow-y:scroll;
}
p {
  margin: 0;
  font-size: 14px;
}
.rank-box {
  height: 100%;
  overflow: auto;
}
.container {
  padding: 0 10px;
  /*height: calc(100% - 20px);*/
  /*overflow: auto;*/
}
/*seciton*/
.section-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 85px;
}
.section-item-title {
  font-weight: bold;
  line-height: 24px;
  font-size: 14px;
}
.section-item-desc {
  color: #777;
  line-height: 20px;
  font-size: 12px;
}
.section-item-label {
  margin-top: 5px;
}
.section-item-label span {
  padding: 2px 6px;
  border: 1px solid orange;
  border-radius: 15px;
  color: orange;
  font-size:12px;
  font-size:9.6px;
  -webkit-transform: scale(0.80);
}
.section-btn {
  border: 1px solid #529ec2;
  color: #529ec2;
  padding: 3px 14px;
  font-size: 12px;
  border-radius: 15px;
  line-height: 12px;
  height: 24px;
}
.section-item-index {
  text-align: center;
}
.section-item-left {
  padding: 5px;
  width:75px;
  margin-right:10px
}
.section-item-middle{
  width:200px;
}
.section-img {

  overflow: hidden;


  width: 65px;
  height: 65px;
  padding: 5px;
}
.section-img img {


  width: 100%;
  height: 100%;
  border-radius: 15px;
  box-shadow: 0px 2px 10px #dadada;
}
.section-item-right{
  width:80px;
}
.section-item-right button{
  width:100%;
  display:block;
}
.section-item-right button span{
  width:100%;
  display:block;
}
/*seciton  over*/

.circle {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  width: 100%;
  text-align: center;
}
</style>
